.text-hidden {
    width: 200px; /* 容器的宽度 */
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 在溢出的位置显示省略号 */
    border: 1px solid #ccc; /* 为容器添加边框，可选 */
}

.shu {
    display: flex;
    flex-direction: column; /* 将子元素纵向排列 */
    height: 200px; /* 设置容器的高度，可以根据需要调整 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    border: 1px solid #ccc; /* 可选，为容器添加边框 */
}

/*
justify-content 是 Flexbox 布局中的一个 CSS 属性，用于控制子元素在主轴上的对齐方式。这个属性决定了在主轴上剩余空间是如何分配的，以及在主轴上的对齐方式。justify-content 的取值有多种，常用的包括：
flex-start: 默认值，子元素在主轴上与容器的起始边对齐。

flex-end: 子元素在主轴上与容器的结束边对齐。

center: 子元素在主轴上居中对齐。

space-between: 子元素在主轴上平均分布，首尾两个子元素分别靠近容器的起始和结束边。

space-around: 子元素在主轴上平均分布，每个子元素两侧有相等的空白间隔。

space-evenly: 子元素在主轴上平均分布，包括首尾两个子元素和容器边缘之间的空白间隔。
*/